<template>
  <div class="app-container">
    <div class="header">
      <el-input v-model="listQuery.keyWord" placeholder="请输入课程名称" clearable @keyup.enter.native="handleFilter" />
      <el-button type="primary" size="small" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="addNewCourse">新增课程</el-button>
    </div>
    <el-table :data="courseListData" border fit :header-cell-style="{background:g.mainColor}">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="{$index}">
          <span>{{ $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="课程头像" align="center" width="150">
        <template slot-scope="{row}">
          <span>
            <img :src="row.introducePictures ? row.introducePictures.split(',')[0] : '' " class="table-row-img">
          </span>
        </template>
      </el-table-column>
      <el-table-column label="课程名称" align="center" prop="name" />
      <el-table-column label="课程分类" align="center" prop="categoryName" />
      <el-table-column label="课程类型" align="center" prop="courseNatureName" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status | courseType }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="{row,$index}">
          <el-button v-show="row.status !== 3" size="small" type="primary" @click="handleEdit(row,$index)">
            编辑课程
          </el-button>
          <p />
          <el-button v-show="row.status !== 3" size="small" type="success" @click="handleUpdate(row,$index)">
            上架课程
          </el-button>
          <el-button v-show="row.status === 3" size="small" type="warning" @click="handleUpdate(row,$index)">
            下架课程
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { merchantCourseList, merchantCourseDown, merchantCourseUp } from '@/api/account'

export default {
  name: 'MerchantCourseList',
  components: { Pagination },
  data() {
    return {
      courseListData: null,
      total: 0,
      listLoading: true,
      listQuery: {
        id: '',
        currentPage: 1,
        pageSize: 10,
        keyWord: ''
      }
    }
  },
  created() {
  },
  mounted() {
    this.listQuery.id = this.$route.params['id']
    this.getList()
  },
  methods: {
    getList() {
      merchantCourseList(this.listQuery).then(response => {
        const { records, total } = response.data
        this.courseListData = records
        this.total = total
      })
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleEdit(row) {
      this.$router.push({
        path: '/course/curriculum/courseEdit',
        query: {
          id: row.id
        }
      })
    },
    handleUpdate(row) {
      this.$confirm('是否确认' + (row.status === 2 || row.status === 4 ? '上架' : '下架') + '该课程？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.status === 2 || row.status === 4) {
          merchantCourseUp({
            id: row['id']
          }).then(response => {
            this.$message({ message: '操作成功', type: 'success' })
            this.getList()
          })
        } else if (row.status === 3) {
          merchantCourseDown({
            id: row['id']
          }).then(response => {
            this.$message({ message: '操作成功', type: 'success' })
            this.getList()
          })
        }
      })
    },
    addNewCourse() {
      this.$router.push({
        path: '/course/curriculum/courseAdd',
        query: { id: this.listQuery.id }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  padding: 15px;
  .header{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-input{
      width: 240px;
    }
    .el-button{
      margin: 0 10px;
    }
  }
}
.table-row-img{
  width: 100px;
  height: 100px;
  object-fit: contain;
}
</style>
